import React, { useEffect } from "react";
import { useModel } from "@umijs/max";
import { Modal, Form, Select } from "antd";
import { modalPropsType } from "@/constants/types";
import XlNumberRange from "@/components/Form/XlNumberRange";

const {Item} = Form;
const rules = [{required: true}];
const labelCol = {span: 4}

const WeightRatioUpdate = ({title, visible, onCancel, onSubmit, loading, currentRow}: modalPropsType) => {
  const [form] = Form.useForm();
  const { getDict } = useModel('dictModel');
  const countrys = getDict('country');
  const prdTypes = getDict('prdType');

  const handleSubmit = async () => {
    const res = await form.validateFields();
    onSubmit({
      ...res,
      leftRatio: res?.ratio?.[0],
      rightRatio: res?.ratio?.[1],
      countryName: countrys?.find((v: {label: string, value: string | number}) => v.value === res?.country)?.label,
      productName: prdTypes?.find((v: {label: string, value: string | number}) => v.value === res?.product)?.label,
      ratio: undefined,
    });
  }

  useEffect(() => {
    if (currentRow) {
      form.setFieldsValue({
        ...currentRow,
        ratio: [currentRow?.leftRatio, currentRow?.rightRatio]
      });
    }
  }, [JSON.stringify(currentRow)])

  return (
    <Modal
      title={title}
      open={visible}
      confirmLoading={loading}
      onCancel={onCancel}
      onOk={handleSubmit}
      maskClosable={false}
    >
      <Form form={form} className="modal-form-padding" labelCol={labelCol}>
        <Item label="国家" name="country" rules={rules}>
          <Select options={countrys} disabled={!!currentRow} />
        </Item>
        <Item label="产品" name="product" rules={rules}>
          <Select options={prdTypes} disabled={!!currentRow} />
        </Item>
        <Item label="货重比" name="ratio" rules={rules}>
          <XlNumberRange />
        </Item>
      </Form>
    </Modal>
  );
}
export default WeightRatioUpdate;